import React, {useEffect, useState} from 'react';
import {useDispatch} from 'react-redux'
import {NotFoundStyle} from './style'

import img from '@/assets/images/404.png';

const NotFound = () => {
  const dispatch = useDispatch()
  const [animated, setAnimated] = useState("");
  useEffect(() => {
    dispatch({
      type: 'setFooterMenu',
      data: "none"
    })
    return () => {
      dispatch({
        type: 'setFooterMenu',
        data: "block"
      })
    }
  },[]);
  return (
    <NotFoundStyle>
      <img src={img} alt="404" className={`animated swing ${animated}`} onMouseEnter={()=>setAnimated("hinge")} />
    </NotFoundStyle>
  );
}

export default NotFound;
